<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script>
    function $(id) {
      return document.getElementById(id)
    }

    /**
     * 当单击>时，将左边选中项移动到右边
     */
    function rightOne() {
      var oArray = $("leftSelect").getElementsByTagName("option");
      for (let i=0;i<oArray.length;i++){
        // alert(oArray[i].selected)
        if (oArray[i].selected==true){
          let optionObj = document.createElement("option");
          optionObj.innerHTML = oArray[i].value;
          $("rightSelect").appendChild(optionObj);
          oArray[i].remove();
        }
      }
    }

    /**
     * 单击>>时，将左边所有选项移动到右边。
     */
    function rightAll() {
      var oArray = $("leftSelect").getElementsByTagName("option");
      for (let i=0;i<oArray.length;i++){
        let optionObj = document.createElement("option");
        optionObj.innerHTML = oArray[i].value;
        $("rightSelect").appendChild(optionObj);
        oArray[i--].remove();
      }
    }

    /**
     * 当单击<时，将右边选中项移动到左边
     */
    function leftOne() {
      var oArray = $("rightSelect").getElementsByTagName("option");
      for (let i=0;i<oArray.length;i++){
        if (oArray[i].selected==true) {
          let optionObj = document.createElement("option");
          optionObj.innerHTML = oArray[i].value;
          $("leftSelect").appendChild(optionObj);
          oArray[i].remove();
        }
      }
    }

    /**
     * 单击<<时，将右边所有选项移动到左边
     */
    function leftAll() {
      var oArray = $("rightSelect").getElementsByTagName("option");
      for (let i=0;i<oArray.length;i++){
        let optionObj = document.createElement("option");
        optionObj.innerHTML = oArray[i].value;
        $("leftSelect").appendChild(optionObj);
        oArray[i--].remove();
      }
    }
  </script>
</head>
<body>
  <div style="display: flex">
  <select multiple style="width: 100px;height: 150px" id="leftSelect">
    <option>语文</option><!--selected-->
    <option>数学</option>
    <option>物理</option>
    <option>化学</option>
  </select>
  <div>
  <input type="button" value=">" onclick="rightOne()"> <br>
  <input type="button" value=">>" onclick="rightAll()"> <br>
  <input type="button" value="<" onclick="leftOne()"> <br>
  <input type="button" value="<<" onclick="leftAll()">
  </div>
  <select multiple style="width: 100px;height: 150px" id="rightSelect">

  </select>
  </div>
</body>
</html>
